<!DOCTYPE html>
<!--[if lte IE 8]>              <html class="ie8 no-js" lang="en">     <![endif]-->
<!--[if IE 9]>					<html class="ie9 no-js" lang="en">     <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="not-ie no-js" lang="en">  <!--<![endif]-->
<head>
	<!-- Google Web Fonts
  ================================================== -->
	<link href='http://fonts.googleapis.com/css?family=Allura|Oswald:400,700,300' rel='stylesheet' type='text/css'>
	
	<!-- Basic Page Needs
  ================================================== -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if ie]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
	
	<title>Almera | Columns</title>
	
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="shortcut" href="images/favicon.ico" />
	
	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	
	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/skeleton.css" />
	<link rel="stylesheet" href="css/layout.css" />
	
	<link rel="stylesheet" href="css/font-awesome.css" />
	<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" />

	<!-- HTML5 Shiv
	================================================== -->
	<script src="js/jquery.modernizr.js"></script>
	
</head>
<body>
	
<!-- - - - - - - - - - - - - - Header - - - - - - - - - - - - - - - - -->	

<header id="header">

	<div class="container">

		<div class="sixteen columns">

			<div id="logo">
				<h1><a href="index.html">Almera</a></h1>
			</div><!--/ #logo-->

			<nav id="navigation" class="navigation">

				<div class="menu">

					<ul>
						<li><a href="index.html">Home</a>
							<ul>
								<li><a href="index.html">Home Grid 1</a></li>
								<li><a href="index4.html">Home Grid 2</a></li>
								<li><a href="index5.html">Fullscreen</a></li>
								<li><a href="masonry.html">Masonry</a></li>
							</ul>
						</li>
						<li><a href="image-gallery.html">Gallery</a>
							<ul>
								<li><a href="image-gallery.html">Image Gallery</a></li>
								<li><a href="thumbnails.html">Thumbnails</a></li>
								<li><a href="gallery-3-columns.html">3 Columns</a></li>
								<li><a href="gallery-4-columns.html">4 Columns</a></li>
							</ul>
						</li>
						<li><a href="albums.html">Albums</a></li>
						<li><a href="about.html">About</a></li>
						<li class="current-menu-item"><a href="elements.html">Features</a>
							<ul>
								<li><a href="elements.html">Elements</a></li>
								<li><a href="columns.html">Columns</a></li>
								<li><a href="typography.html">Typography</a></li>
							</ul>
						</li>
						<li><a href="blog.html">Blog</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>

				</div><!--/ .menu-->

			</nav><!--/ #navigation-->	

		</div><!--/ .columns-->

	</div><!--/ .container-->

</header><!--/ #header-->

<!-- - - - - - - - - - - - - - end Header - - - - - - - - - - - - - - - - -->	


<!-- - - - - - - - - - - - - - - - Content - - - - - - - - - - - - - - - - -->	

<div id="wrapper" class="sbr">
	
	<div id="content">

		<div class="container">

			<div class="page-header">
				<h1>pages splitting <br /> into columns</h1>
			</div><!--/ .page-header-->	

			<div class="eight columns row">

				<h6>1/2 Column</h6>
				<span class="dropcapcircle">1</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet
					tristique erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum 
					primis in faucibus orcluctus et ultrices posuere cubilia mattis elit porttitor. Vestibulum ante ipsum.
				</p>

			</div><!--/ .columns -->

			<div class="eight columns row">

				<h6>1/2 Column</h6>
				<span class="dropcapcircle">2</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet
					tristique erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum 
					primis in faucibus orcluctus et ultrices posuere cubilia mattis elit porttitor. Vestibulum ante ipsum.
				</p>

			</div><!--/ .columns -->

			<div class="one-third column row">

				<h6>1/3 Column</h6>
				<span class="dropcapcircle">1</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet
					tristique erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum 
					primis in faucibus orcluctus et ultrices posuere cubilia. 
				</p>

			</div><!--/ .columns -->

			<div class="one-third column row">

				<h6>1/3 Column</h6>
				<span class="dropcapcircle">2</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet
					tristique erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum 
					primis in faucibus orcluctus et ultrices posuere cubilia. 
				</p>

			</div><!--/ .columns -->

			<div class="one-third column row">

				<h6>1/3 Column </h6>
				<span class="dropcapcircle">3</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet
					tristique erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum 
					primis in faucibus orcluctus et ultrices posuere cubilia. 
				</p>

			</div><!--/ .columns -->

			<div class="sixteen columns row">

				<h6>16 Columns </h6>
				<span class="dropcapcircle">1</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet tristique
					erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum primis in 
					faucibus orcluctus et ultrices posuere cubilia mattis elit porttitor. 	Aliquam hendrit
					rutrum iaculis nullam ondimentum maluada velit beum donec sit amet tristique erosam amet. 
					Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum primis in faucibus orcluctus
					et ultrices posuere cubilia mattis elit porttitor. Aliquam hendrit rutrum iaculis nullam
					ondimentum maluada velit beum donec sit amet tristique erosam amet. Risus mollis malesuada 
					quis quis nulla. Vestibulum ante ipsum primis in faucibus orcluctus et ultrices posuere 
					cubilia mattis elit porttitor ante ipsum primis in faucibus. 
				</p>

			</div><!--/ .columns-->

			<div class="four columns row">

				<h6>1/4 Column </h6>
				<span class="dropcapcircle">1</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet tristique
					erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum. 
				</p>

			</div><!--/ columns-->

			<div class="four columns row">

				<h6>1/4 Column </h6>
				<span class="dropcapcircle">2</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet tristique
					erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum. 
				</p>

			</div><!--/ .columns-->

			<div class="four columns row">

				<h6>1/4 Column </h6>
				<span class="dropcapcircle">3</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet tristique
					erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum. 
				</p>

			</div><!--/ columns-->

			<div class="four columns row">

				<h6>1/4 Column </h6>
				<span class="dropcapcircle">4</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet tristique
					erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum. 
				</p>

			</div><!--/ columns-->

			<div class="twelve columns row">

				<h6>12 Columns </h6>
				<span class="dropcapcircle">1</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet 
					tristique erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum primis
					in faucibus orcluctus et ultrices posuere cubilia mattis elit porttitor. Aliquam hendrit
					rutrum iaculis nullam ondimentum maluada velit beum donec sit amet tristique erosam amet. 
					Risus mollis malesuada quis quis nulla. Vestibulum ante ipsum primis in faucibus orcluctus 
					et ultrices posuere cubilia mattis elit porttitor. Vestibulum ante ipsum primis in faucibus orcluctus 
					et ultrices posuere cubilia.
				</p>

			</div><!--/ columns-->

			<div class="four columns row">

				<h6>1/4 Column </h6>
				<span class="dropcapcircle">2</span>

				<p>
					Aliquam hendrit rutrum iaculis nullam ondimentum maluada velit beum donec sit amet tristique
					erosam amet. Risus mollis malesuada quis quis nulla. Vestibulum. 
				</p>

			</div><!--/ columns-->

		</div><!--/ .container-->

	</div><!--/ #content-->
	
</div><!--/ #wrapper-->

<!-- - - - - - - - - - - - - - - - Content - - - - - - - - - - - - - - - - -->	


<!-- - - - - - - - - - - - - - - Footer - - - - - - - - - - - - - - - - -->	

<footer id="footer">

	<div class="container">

		<div class="sixteen columns">

			<div class="eight columns alpha">

				<div class="copyright">
					Copyright &copy; 2013. ThemeMakers. All rights reserved
				</div><!--/ .copyright-->

				<div class="developed">
					Developed by <a href="#">ThemeMakers</a>
				</div><!--/ .developed-->

			</div><!--/ .columns-->

			<div class="eight columns omega">

				<ul class="social-icons">
					<li class="twitter"><a target="_blank" href="https://twitter.com/ThemeMakers"><span>Twitter</span></a></li>
					<li class="facebook"><a target="_blank" href="http://www.facebook.com/wpThemeMakers"><span>Facebook</span></a></li>
					<li class="dribble"><a target="_blank" href="http://dribbble.com/"><span>Dribbble</span></a></li>
					<li class="vimeo"><a target="_blank" href="https://vimeo.com/"><span>Vimeo</span></a></li>
					<li class="youtube"><a target="_blank" href="http://www.youtube.com/"><span>Youtube</span></a></li>
					<li class="instagram"><a target="_blank" href="http://www.instagram.com/"><span>Instagram</span></a></li>
					<li class="rss"><a target="_blank" href="#"><span>Rss</span></a></li>
				</ul><!--/ .social-icons-->	

			</div><!--/ .columns-->

		</div><!--/ .columns-->

	</div><!--/ .container-->

</footer><!--/ #footer-->

<!-- - - - - - - - - - - - - - end Footer - - - - - - - - - - - - - - - -->			

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<!--For Touch Devices-->
<script src="js/jquery.touchswipe.min.js"></script>
<!--end Touch Devices-->
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/config.js"></script>
<script src="js/custom.js"></script>
</body>
</html>